<template>
	<div id="emails">
		<div class="emails_page">
			<div class="weui-tab">
				<div class="weui-tab__panel">
					<div class="weui_table_top">
						<i class="el-icon-arrow-left" @click="goBack"></i>
						<span class="emails_top_title">邮箱提醒</span>
						<i class="el-icon-setting"></i>
					</div>
					<div class="weui_table_bd">
						<div class="big_box">
							<div class="emails_page_bd">
								<div class="emails_page_bd_dat">
									<p class="emails_page_bd_date">
										<span class="emails_page_bd_date_sp1">2019-2-01</span>
										<span class="emails_page_bd_date_sp2">晚上</span>
										<span class="emails_page_bd_date_sp3">8:00</span>
									</p>
								</div>
								<div class="emails_page_bd_bd">
									<p class="emails_page_bd_bd_name">小明</p>
									<p class="emails_page_bd_bd_title">邀请您参加小游戏制作，收到回复</p>
									<p class="emails_page_bd_bd_detail">查看详情....</p>
								</div>
							</div>

							<div class="emails_page_bd">
								<div class="emails_page_bd_dat">
									<p class="emails_page_bd_date">
										<span class="emails_page_bd_date_sp1">2019-2-01</span>
										<span class="emails_page_bd_date_sp2">晚上</span>
										<span class="emails_page_bd_date_sp3">8:00</span>
									</p>
								</div>
								<div class="emails_page_bd_bd">
									<p class="emails_page_bd_bd_name">小明</p>
									<p class="emails_page_bd_bd_title">邀请您参加小游戏制作，收到回复</p>
									<p class="emails_page_bd_bd_detail">查看详情....</p>
								</div>
							</div>
							
							<div class="emails_page_bd">
								<div class="emails_page_bd_dat">
									<p class="emails_page_bd_date">
										<span class="emails_page_bd_date_sp1">2019-2-01</span>
										<span class="emails_page_bd_date_sp2">晚上</span>
										<span class="emails_page_bd_date_sp3">8:00</span>
									</p>
								</div>
								<div class="emails_page_bd_bd">
									<p class="emails_page_bd_bd_name">小明</p>
									<p class="emails_page_bd_bd_title">邀请您参加小游戏制作，收到回复</p>
									<p class="emails_page_bd_bd_detail">查看详情....</p>
								</div>
							</div>

							<div class="emails_page_bd">
								<div class="emails_page_bd_dat">
									<p class="emails_page_bd_date">
										<span class="emails_page_bd_date_sp1">2019-2-01</span>
										<span class="emails_page_bd_date_sp2">晚上</span>
										<span class="emails_page_bd_date_sp3">8:00</span>
									</p>
								</div>
								<div class="emails_page_bd_bd">
									<p class="emails_page_bd_bd_name">小明</p>
									<p class="emails_page_bd_bd_title">邀请您参加小游戏制作，收到回复</p>
									<p class="emails_page_bd_bd_detail">查看详情....</p>
								</div>
							</div>

							<div class="emails_page_bd">
								<div class="emails_page_bd_dat">
									<p class="emails_page_bd_date">
										<span class="emails_page_bd_date_sp1">2019-2-01</span>
										<span class="emails_page_bd_date_sp2">晚上</span>
										<span class="emails_page_bd_date_sp3">8:00</span>
									</p>
								</div>
								<div class="emails_page_bd_bd">
									<p class="emails_page_bd_bd_name">小明</p>
									<p class="emails_page_bd_bd_title">邀请您参加小游戏制作，收到回复</p>
									<p class="emails_page_bd_bd_detail">查看详情....</p>
								</div>
							</div>

							<div class="emails_page_bd">
								<div class="emails_page_bd_dat">
									<p class="emails_page_bd_date">
										<span class="emails_page_bd_date_sp1">2019-2-01</span>
										<span class="emails_page_bd_date_sp2">晚上</span>
										<span class="emails_page_bd_date_sp3">8:00</span>
									</p>
								</div>
								<div class="emails_page_bd_bd">
									<p class="emails_page_bd_bd_name">小明</p>
									<p class="emails_page_bd_bd_title">邀请您参加小游戏制作，收到回复</p>
									<p class="emails_page_bd_bd_detail">查看详情....</p>
								</div>
							</div>
						</div>

					</div>
				</div>
				<div class="weui-tabbar">
					<a href="javascript:;" class="weui-tabbar__item">
						<p class="foot_left">写邮件</p>
					</a>
					<a href="javascript:;" class="weui-tabbar__item">
						<p class="foot_right">
							<span><img src="../../assets/img/icon_email.png" class="foot_right_icon"/></span>
							<span class="foot_right_tex">邮箱&nbsp;(</span>
							<span class="foot_right_num">38</span>)
							<span class="foot_right_last">)</span>
						</p>
					</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'emails',
		data() {
			return {

			}
		},
		methods: {
			goBack() {
				history.back(-1);
			}
		}
	}
</script>

<style scoped="scoped">
	#emails {
		width: 100%;
		height: 100%;
		font-size: 0.15rem;
		background: #f1f1f1;
	}
	/*头部*/
	
	.emails_page {
		width: 100%;
		height: 100%;
	}
	
	.weui_table_top {
		width: 100%;
		height: 0.5rem;
		display: flex;
		position: fixed;
		z-index: 1000;
		top: 0;
		background-color: white;
	}
	
	.el-icon-arrow-left {
		font-size: 0.3rem;
		margin-top: 0.1rem;
		margin-left: 0.1rem;
		color: black;
		font-weight: bold;
	}
	
	.emails_top_title {
		font-size: 0.18rem;
		color: black;
		display: block;
		margin-top: 0.1rem;
		font-weight: bold;
	}
	
	.el-icon-setting {
		font-size: 0.25rem;
		margin-top: 0.5rem;
		margin-left: 2.2rem;
		margin-top: 0.1rem;
	}
	/*主体*/
	
	.weui_table_bd {
		width: 100%;
	}
	
	.big_box {
		width: 100%;
		margin-top: 0.6rem;
	}
	
	.emails_page_bd {
		width: 95%;
		height: 1.1rem;
		margin-left: 0.1rem;
		margin-top: 0.25rem;
	}
	
	.emails_page_bd_dat {
		width: 100%;
		height: 0.3rem;
		background-color: #f1f1f1;
	}
	
	.emails_page_bd_date {
		font-family: "微软雅黑";
		font-size: 0.2rem;
		text-align: center;
	}
	
	.emails_page_bd_date_sp1 {
		font-size: 0.2rem;
	}
	
	.emails_page_bd_date_sp2 {
		font-size: 0.2rem;
	}
	
	.emails_page_bd_date_sp3 {
		font-size: 0.2rem;
	}
	
	.emails_page_bd_date_sp4 {
		font-size: 0.2rem;
	}
	
	.emails_page_bd_bd {
		width: 100%;
		height: 0.8rem;
		background-color: white;
	}
	
	.emails_page_bd_bd_name {
		font-family: "微软雅黑";
		font-size: 0.18rem;
		margin-left: 0.2rem;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.emails_page_bd_bd_title {
		font-family: "微软雅黑";
		font-size: 0.18rem;
		margin-left: 0.2rem;
		color: gray;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.emails_page_bd_bd_detail {
		font-family: "微软雅黑";
		font-size: 0.15rem;
		margin-left: 0.2rem;
	}
	/*底部*/
	
	.weui-tabbar__item {
		border: 0.01rem solid gray;
		background-color: gainsboro;
		border-left: none;
		border-bottom: none;
		border-right: none;
	}
	
	.foot_left {
		font-family: "微软雅黑";
		font-size: 0.18rem;
		margin-top: 0.1rem;
		color: black;
	}
	
	.foot_right {
		display: flex;
		margin-left: 0.3rem;
	}
	
	.foot_right_icon {
		width: 0.25rem;
		height: 0.25rem;
		margin-top: 0.05rem;
	}
	
	.foot_right_tex {
		margin-left: 0.05rem;
		margin-top: 0.05rem;
		font-size: 0.18rem;
		color: black;
	}
	
	.foot_right_num {
		font-size: 0.18rem;
		color: black;
		margin-top:0.05rem;
	}
	
	.foot_right_last {
		font-size: 0.18rem;
		color: black;
		margin-top: 0.05rem;
	}
</style>